<template>
	<view class="container p-2 border-bottom border-light-secondary">
		<view class="grace-space-between grace-flex-vcenter">
			<view class="grace-flex grace-flex-vcenter">
				<image class="mr-2 rounded-circle" style="width: 90rpx; height: 90rpx;" :src="item.user.userpic ? item.user.userpic: '/static/default.jpg'" lazy-load></image>
				<text class="font-md text-light-muted font-sm px-2">{{ item.user.username }}</text>
			</view>
			<text class="p-1 rounded bg-main text-white" v-show="!isFollow" @click="follow">关注</text>
		</view>
		<view class="font-lg py-2" @click="gotoDetail">{{ item.title }}</view>
		<image class="w-100 rounded" v-if="item.titlepic" :src="item.titlepic" lazy-load style="height: 380rpx;"></image>
		<view class="oprator-container grace-space-between grace-flex-vcenter">
			<view>
				<view :class="{ active: info.status === 1 }" @click="oprator('like')">
					<view class="iconfont icon-icon_xiaolian-mian"></view>
					<text>{{ item.ding_count }}</text>
				</view>
				<view :class="{ active: info.status === 2 }" @click="oprator('unLike')">
					<view class="iconfont icon-kulian"></view>
					<text>{{ item.cai_count }}</text>
				</view>
			</view>
			<view>
				<view @click="gotoDetail">
					<view class="iconfont icon-pinglun1"></view>
					<text>{{ item.comment_count }}</text>
				</view>
				<view>
					<view class="iconfont icon-zhuanfa"></view>
					<text>{{ item.sharenum }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
var graceJS = require('@/Grace.JS/grace.js');
export default {
	props: {
		item: Object
	},
	data() {
		return {
			isFollow: false,
			info: {
				unLikeNum:this.item.cai_count,
				likeNum:this.item.ding_count,
			}
		};
	},
	methods: {
		follow() {
			this.checkAuth(()=>{
				this.isFollow = true;
				uni.showToast({
					title: '关注成功'
				});
			})
		},
		oprator(type) {
			this.checkAuth(()=>{
				if (type === 'like') {
					if (this.info.status === 1) {
						return;
					}
					if (this.info.status === 2) {
						this.info.unLikeNum--;
					}
					this.info.likeNum++;
					this.info.status = 1;
				} else if (type === 'unLike') {
					if (this.info.status === 2) {
						return;
					}
					if (this.info.status === 1) {
						this.info.likeNum--;
					}
					this.info.unLikeNum++;
					this.info.status = 2;
				}
			})
		},
		gotoDetail() {
			this.checkAuth(()=>{
				graceJS.navigate('../detail/detail?detailData='+JSON.stringify(this.item));
			})
		}
	}
};
</script>

<style lang="stylus" scoped>
.container
	.oprator-container
		padding-top 20rpx
		color #999999
		view
			display flex
			align-items center
			.active
				color #FEE42A
			view
				margin-left 10rpx
				&:first-child
					margin-right 15rpx
				text
					font-size 28rpx
</style>
